<template>
  <view class="c-title c333 fw500 font32 flex align-center">
    <view class="c-title__box">
      <slot></slot>
    </view>

    <view class="flex align-center font24 c666 mglauto" v-if="showMore" @click="$emit('click')">
      <template v-if="moreTheme === 'normal'">
        <text style="padding-right: 8rpx">更多</text>
        <view>
          <u-icon name="arrow-right" color="#666666" size="24rpx"> </u-icon>
        </view>
      </template>

      <template v-else-if="moreTheme === 'icon'">
        <image class="more-icon" src="@/static/icon/arrow-right.png" @click="$emit('click')"></image>
      </template>

      <template v-else>
       <slot name="right"></slot>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    showMore: {
      type: Boolean,
      default: false,
    },

    moreTheme: {
      type: String,
      default: "normal",
    },
  },
};
</script>

<style lang="scss" scoped>
.c-title {
  padding-bottom: 4rpx;

  &__box {
    width: fit-content;
    position: relative;
    &::after {
      position: absolute;
      content: "";
      width: calc(100% + 80rpx);
      height: 4rpx;
      left: 0;
      bottom: -4rpx;
      background: linear-gradient(90deg, #3522bb 0%, rgba(255, 255, 255, 0) 100%);
    }
  }
}

.more-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>
